<!
触摸事件

三种在规范中列出并跨移动设备广泛实现的基本触摸事件：

touchstart：手指放在一个 DOM 元素上。
touchmove：手指拖动一个 DOM 元素。
touchend：手指从一个 DOM 元素上移开。
每个触摸事件都包括了三个触摸列表：

touches：当前位于屏幕上的所有手指动作的列表。
targetTouches：位于当前 DOM 元素上的手指动作的列表。
changedTouches：涉及当前事件的手指动作的列表。例如，在一个 touchend 事件中，这将是移开手指。>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
<style>
	body {background: #2a2a2a;}
	body,html {overflow: hidden;}
	.arrow {width:50px;height:50px;background: #92c62f;border-radius: 100%; position:absolute;top:50%;left:40%;overflow: hidden;}
	.arrow:before{content: "";position: absolute;width: 90%;height: 90%;border-radius: 100%;top:-3%;left:-3%;
		background:-webkit-linear-gradient(top, #92c62f 0%,rgba(255,255,255,.7) 100%);
		transform:rotate(-45deg);
	}
	#box {width: 50px;height: 50px;position: absolute;background:#f80;}

</style>	
</head>
<body>
	
	<div class="arrow" data-pon="" ontouchstart="touchStart(event,this)"></div>
	<div id="box" data-pon="" ontouchstart="touchStart(event,this)"></div>
	
	
</body>
<script>
	
	
/*三角形角度：对边/邻边除圆周率*/	
//180*Math.atan( 15/5 )/ Math.PI

//window.onload = function(){
	document.addEventListener('touchmove',defaultEvent,false);
	var pressX = 0;	//初始触摸点位置
	var	pressY = 0;
	var	disX = 0;	//滑动差值
	var	disY = 0;
	//var obj = document.querySelector('.move');
	//obj.addEventListener('touchstart',touchStart,false);
	var myArray,x,y;//xy存储data-pon值
	
	function touchStart(e,_this){
		var touch = e.changedTouches[0];
		pressX = touch.pageX;
		pressY = touch.pageY;
		_this.addEventListener('touchmove',touchMove,false);
		_this.addEventListener('touchend',touchEnd,false);
		myArray = _this.getAttribute("data-pon");
		if(myArray){//判断data-pon是否有值,没有发生移动就给初始值0，下面会需要xy和移动距离deltaX\deltaY相加
			var strs= new Array(); //定义一数组 
			strs = myArray.split(","); //字符分割
			x = strs[0];
			y = strs[1];
		}else{
			x = 0;
			y = 0;
		}
		console.log("获取dataX："+x,"获取dataY："+y)
	}
	
	//移动X,Y距离
	function touchMove(e){
		if (e.targetTouches.length == 1) {//只允许一个触摸点
			var touch = e.changedTouches[0];
			var deltaX = touch.pageX - pressX;
			var deltaY = touch.pageY - pressY;
			this.style.webkitTransform = "translate3d("+(Number(x)+deltaX)+"px,"+(Number(y)+deltaY)+"px,0)";
		}
		//把结束位置的坐标传回去
		this.setAttribute("data-pon",(Number(x)+deltaX) + "," + (Number(y)+deltaY));
		
	}
	
	function touchEnd(e){
		//console.log(disX,disY)
		//console.log("end:"+x,"end:"+y);
	}
	
	//阻止页面的滑动默认事件
	function defaultEvent(e){
		e.preventDefault();
	}

	
//}


</script>
</html>